/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useCallback, useState, useRef, useEffect } from "react";
import { connect } from "dva";
import { Row, Col, Typography } from "antd";
import { useInterval } from "ahooks";
import classnames from "classnames";
import first from "@/assets/bigScreen/yzScreen/1st.png";
import second from "@/assets/bigScreen/yzScreen/2nd.png";
import third from "@/assets/bigScreen/yzScreen/3rd.png";
import CommonBorder from "./Wrappers/CommonBorder";
import NoDate from "./Wrappers/NoDate";
import styles from "./OutRateRange.less";

const { Text } = Typography;

const icons = [first, second, third];

const OutRateRange = ({ dispatch, token, isParentFull, loading }) => {
  const heightRef = useRef({});
  const [height, setHeight] = useState(0);
  const [data, setDate] = useState([]);
  const timer = useRef(null);

  const fetchData = useCallback(
    () => {
      dispatch({
        type: "chartData/getOutRateRange",
        payload: {
          token,
        },
      }).then(res => {
        setDate(res);
      });
    },
    [dispatch, token]
  );

  useEffect(
    () => {
      timer.current = setTimeout(() => {
        heightRef.current && setHeight(heightRef.current.clientHeight);
      }, 1000);
      return () => {
        timer.current && clearTimeout(timer.current);
      };
    },
    [isParentFull, heightRef]
  );

  useEffect(fetchData, [fetchData]);
  useInterval(fetchData, 1000 * 60 * 60);

  return (
    <CommonBorder title="3日出库率排名" loading={loading}>
      <div style={{ height: "100%" }} ref={heightRef} className={styles.wrapper}>
        {data.length > 0 ? (
          <Row
            type="flex"
            align="middle"
            justify="space-between"
            style={{
              height,
              flexDirection: "column",
              justifyContent: "space-around",
            }}
          >
            {data.map((item, index) => {
              const top3 = index < 3;
              const className = classnames(styles.content, {
                [styles.top3]: top3,
              });

              return (
                <Col key={item.inn_name} span={24}>
                  <Row type="flex" justify="space-between" align="middle" className={className}>
                    <Col style={{ width: 24, textAlign: "center" }}>
                      {top3 ? (
                        <img className={styles.icon} src={icons[index]} alt={item.inn_name} />
                      ) : (
                        <span>{index + 1}</span>
                      )}
                    </Col>
                    <Col style={{ flex: 1 }}>
                      <Text ellipsis>{item.inn_name}</Text>
                    </Col>
                    <Col>
                      <span>{item.out_rate}%</span>
                    </Col>
                  </Row>
                </Col>
              );
            })}
          </Row>
        ) : (
          <NoDate title="暂无数据" style={{ height }} />
        )}
      </div>
    </CommonBorder>
  );
};

export default connect(({ global, loading }) => ({
  token: global.screenToken,
  loading: loading.effects["chartData/getOutRateRange"],
}))(OutRateRange);
